<template>
  <el-drawer v-model="dialogVisible" direction="rtl" size="50%" :before-close="handleClose" destroy-on-close>
    <template #header>
      <div class="drawer-header">
        <h2 class="drawer-title">销售运单</h2>
      </div>
    </template>
    <div class="page-box">
      <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="130"
               label-position="left">
        <div class="flex gap-4 cards-container">
          <el-card class="card-item" shadow="hover">
            <div class="card-content">
              <div class="card-label">运单编号</div>
              <div class="card-value">{{ formData?.waybillNo }}</div>
            </div>
          </el-card>
          <el-card class="card-item" shadow="hover">
            <div class="card-content">
              <div class="card-label">运单状态</div>
              <div class="card-value">
                <StatusText
                  v-if="formData?.waybillStatus !== undefined && formData?.waybillStatus !== null"
                  :type="DICT_TYPE.SALE_WAYBILL_STATUS"
                  :value="formData.waybillStatus"
                  :class="getWaybillStatusColor(formData.waybillStatus)"
                />
              </div>
            </div>
          </el-card>
          <el-card class="card-item" shadow="hover">
            <div class="card-content">
              <div class="card-label">车牌号</div>
              <div class="card-value">{{ formData?.vehicleNo }}</div>
            </div>
          </el-card>
        </div>
        <div>
          <div class="title title-custom">业务信息</div>
          <el-table
            :data="dataList || []"
            border
            stripe
            :header-cell-style="{background: '#F5F7FA', color: '#818588'}"
            style="font-size: 14px;font-family: PingFang SC, PingFang SC-400;font-weight: 400;"
          >
            <el-table-column label="皮重" align="center" prop="netWeight">
              <template #default="{ row }">
                <span class="cell-content">{{ row.netWeight || '' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="毛重" align="center" prop="grossWeight">
              <template #default="{ row }">
                <span class="cell-content">{{ row.grossWeight || '' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="净重" align="center" prop="totalWeight">
              <template #default="{ row }">
                <span class="cell-content">{{ row.totalWeight || '' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="接单时间" align="center" prop="acceptOrderTime" :show-overflow-tooltip="true">
              <template #default="{ row }">
                <span class="cell-content">{{ row.acceptOrderTime || '' }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="dataList || []"
            border
            stripe
            :header-cell-style="{background: '#F5F7FA', color: '#818588'}"
            style="font-size: 14px;font-family: PingFang SC, PingFang SC-400;font-weight: 400;"
          >
            <el-table-column label="空磅时间" align="center" prop="netTime" :show-overflow-tooltip="true">
              <template #default="{ row }">
                <span class="cell-content">{{ row.netTime || '' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="重磅时间" align="center" prop="grossTime" :show-overflow-tooltip="true">
              <template #default="{ row }">
                <span class="cell-content">{{ row.grossTime || '' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="出厂时间" align="center" prop="exitTime" :show-overflow-tooltip="true">
              <template #default="{ row }">
                <span class="cell-content">{{ row.exitTime || '' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品" align="center" prop="productName">
              <template #default="{ row }">
                <span class="cell-content">{{ row.productName || '' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="basic-info-section">
          <div class="title title-custom">基本信息</div>
          <el-row>
            <el-col :span="8">
              <div class="form-item-wrapper">
                <span class="form-item-label">客户</span><span class="form-item-colon">:</span>
                <div class="form-item-content">
                  <el-tooltip effect="dark" :content="formData?.customerName">
                    <div class="self-ellipsis self-max-width-200">
                      {{ formData?.customerName }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="form-item-wrapper" style="margin-left: 80%">
                <span class="form-item-label">司机</span><span class="form-item-colon">:</span>
                <div class="form-item-content">
                  <el-tooltip effect="dark" :content="formData?.driverName">
                    <div class="self-ellipsis self-max-width-200">
                      {{ formData?.driverName }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="form-item-wrapper">
                <span class="form-item-label">客户手机号</span><span class="form-item-colon">:</span>
                <div class="form-item-content">
                  <el-tooltip effect="dark" :content="formData?.cusPhone">
                    <div class="self-ellipsis self-max-width-200">
                      {{ formData?.cusPhone }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="form-item-wrapper" style="margin-left: 80%">
                <span class="form-item-label">手机号</span><span class="form-item-colon">:</span>
                <div class="form-item-content">
                  <el-tooltip effect="dark" :content="formData?.driverMobile">
                    <div class="self-ellipsis self-max-width-200">
                      {{ formData?.driverMobile }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="form-item-wrapper">
                <span class="form-item-label">销售方向</span><span class="form-item-colon">:</span>
                <div class="form-item-content"  v-if="formData?.cusSales !== undefined && formData?.cusSales !== null">
                  <StatusText :type="DICT_TYPE.CUS_SALES" :value="formData?.cusSales" :isJL="true"></StatusText>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="form-item-wrapper" style="margin-left: 80%">
                <span class="form-item-label">身份证号</span><span class="form-item-colon">:</span>
                <div class="form-item-content">
                  <el-tooltip effect="dark" :content="formData?.driverIdNo">
                    <div class="self-ellipsis self-max-width-200">
                      {{ formData?.driverIdNo }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="extra-spacing"></el-row>
          <el-row>
            <el-col :span="8">
              <div class="form-item-wrapper">
                <span class="form-item-label">装货地址</span><span class="form-item-colon">:</span>
                <div class="form-item-content">
                  <el-tooltip effect="dark" :content="formData?.loadingSiteName">
                    <div class="self-ellipsis self-max-width-200">
                      {{ formData?.loadingSiteName }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="form-item-wrapper">
                <span class="form-item-label">卸货地址</span><span class="form-item-colon">:</span>
                <div class="form-item-content">
                  <el-tooltip effect="dark" :content="formData?.unLoadingSiteName">
                    <div class="self-ellipsis self-max-width-200">
                      {{ formData?.unLoadingSiteName }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="form-item-wrapper">
                <span class="form-item-label">销售计划编号</span><span class="form-item-colon">:</span>
                <div class="form-item-content">
                  <el-tooltip effect="dark" :content="formData?.planNo">
                    <div class="self-ellipsis self-max-width-200">
                      {{ formData?.planNo }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import * as Utils from '@/utils/dict'
import * as purchaseWaybillApi from "@/api/purchaseWaybill";

const {DICT_TYPE} = reactive(Utils)
const formData: Record<string, any> = ref({})
const emit = defineEmits(['subPage'])
const formLoading = ref(false)
const formRef = ref()
const dialogVisible = ref(false)
const dataList = ref([])
const handleClose = (done) => {
  done()
}
// 获取运单状态对应的颜色
const getWaybillStatusColor = (status) => {
  const colorMap = {
    0: 'sh-type',
    1: 'rc-type',
    2: 'lp-type',
    3: 'zm-type',
    4: 'cm-type',
    5: 'cc-type',
    6: 'wc-type',
    7: 'zf-type',
    8: 'zz-type',
  }
  const colorClass = colorMap[status] || ''
  return colorClass ? ['back-style', colorClass] : 'back-style'
}

const initData = async (id) => {
  formLoading.value = true
  try {
    resetData()
    formData.value = await purchaseWaybillApi.getPurSalesInfoById({id})
    dataList.value = [formData.value]
  } finally {
    formLoading.value = false
  }
}
const open = async (id) => {
  dialogVisible.value = true
  resetData()
  initData(id)
}
const resetData = () => {
  formData.value = {}
  dataList.value = []
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.extra-spacing {
  margin-bottom: 14px !important; /* 双倍间距 */
}
.basic-info-section {
  :deep(.el-row) {
    margin-bottom: 18px;
  }
}

.form-item-wrapper {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  margin-left: 10%;
  max-height: 30px;
  .form-item-label {
    width: 120px;
    text-align: justify;
    color: #606266;
    font-size: 14px;
    flex-shrink: 0;
    font-family: PingFang SC, PingFang SC-400;
    &::after {
      content: "";
      display: inline-block;
      width: 100%;
    }
  }

  .form-item-colon {
    color: #999999;
    padding-right: 12px;
    flex-shrink: 0;
  }

  .form-item-content {
    flex: 1;
    text-align: left;
    padding-left: 12px; // 实现左列右移效果

    .self-ellipsis {
      text-align: left;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-400;
    }
  }
}
.cell-content {
  display: inline-block;
  width: 100%;
  height: 16px;
  padding: 0 12px;
  box-sizing: border-box;
  color: rgba(48, 49, 51, 1);
  font-family: PingFang SC, PingFang SC-500;
  font-weight: 500;
  font-size: 14px;
}
.drawer-header {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid #e8e8e8;
}

.drawer-title {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  color: #333;
}
.page-box {
  padding: 0 30px;
  height: 100%;
  overflow-y: auto;

  .back-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .page-title {
    font-size: 20px; /* 放大字体，可根据需要调整 */
    font-weight: bold; /* 加粗 */
    flex: 1; /* 确保标题占据左侧空间 */
    text-align: left; /* 左对齐 */
  }
  .title {
    font-weight: bold;
    margin-bottom: 20px;
  }
}

:deep(.el-form-item__content) {
  width: 100% !important;
}

.highlight-amount {
  color: rgba(245,108,108,1); /* 红色 */
  font-size: 20px; /* 加大字体 */
  font-weight: bold; /* 可选：加粗 */
}
.title-custom {
  margin-top: 30px;
  width: 100%;
  height: 30px; /* 根据字体高度调整 */
  line-height: 30px; /* 与 height 保持一致，垂直居中 */
  background-color: rgba(0,0,0,0.06); /* 灰色背景 */
  color: rgba(48,49,51,1); /* 黑色字体 */
  border-radius: 4px;
  font-weight: bold; /* 加粗字体 */
  position: relative;
  padding-left: 30px; /* 左侧留出竖线的空间 */
  font-size: 14px;
}
:deep(.el-form-item__label) {
  color: #999999 !important; /* 设置为灰色 */
}
.title-custom::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 5px;
  bottom: 5px;
  width: 4px; /* 竖线宽度 */
  background-color: #409EFF; /* 蓝色竖线 */
}
.cards-container {
  display: flex;
  flex-wrap: nowrap; /* 四个卡片显示在一行 */
  overflow-x: auto; /* 如果卡片超出屏幕宽度，允许横向滚动 */
  gap: 10px; /* 卡片之间的间距 */
  padding-bottom: 5px; /* 防止滚动条遮挡内容 */
  min-height: 120px; /* 设置最小高度 */
  height: auto; /* 允许根据内容自适应 */
}

.card-item {
  flex: 0 0 210px; /* 不放大，不缩小，固定宽度210px */
  min-width: 200px; /* 设置最小宽度，防止卡片过小 */
  background: rgba(64,158,254,0.08);
  border-radius: 4px;
  text-align: center; /* 字体居中 */
  height: 90px;
}

.card-content {
  padding: 0px 0;
}

.card-label {
  color: #606266;
  line-height: 18px;
  font-weight: 400;
  font-family: PingFang SC, PingFang SC-400;
  font-size: 14px;
  margin-bottom: 10px;
}

.card-value {
  font-size: 15px;
  color: #303133;
  font-weight: 500;
  text-align: center;
  font-family: PingFang SC, PingFang SC-500;
  line-height: 22px
}
</style>
